<template>
	<div class="body">
		<!--轮播图-->
		<div class="block">
			<el-carousel height="500px">
				<el-carousel-item v-for="item in imgs" :key="item">
					<img class="img" :src="item.src">
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="huojiang">
			<h2>最新获奖</h2>
			<div class="tu"> 
				<div v-for="item in img1" :key="item" class="picture">
					<img class="huo" :src="item.src"/>
					<h3>昵称：胡睿</h3>
					<h3>奖品名称：保时捷</h3>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imgs: [{
						id: 1,
						src: require('../assets/123456.jpg')
					},
					{
						id: 2,
						src: require('../assets/2035819.jpg')
					},
					{
						id: 3,
						src: require('../assets/123456.jpg')
					},
					{
						id: 4,
						src: require(
							'../assets/fa29fbe99bfba54c78ba31a67d805492--1024813740.jpg'
						)
					}
				],
				img1: [{
						id: 1,
						src: require('../assets/111.png')
					},
					{
						id: 2,
						src: require('../assets/111.png')
					},
					{
						id: 3,
						src: require('../assets/111.png')
					}
				]
			}
		}
	}
</script>

<style>
	.body {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
	}
	
	.tu{
		width: 50rem;
		height: 300px;
		display: flex;
		flex-flow: row;
		justify-content: space-around;
		align-items: space-around;
	}
	
	.huo{
		border: white solid 1px;
		border-radius: 50%;
		width: 150px;
		height: 150px;
	}
	
	.picture{
		border: 1px solid black;
		width: 250px;
		height: 250px;
	}

	.block {
		margin-top: 20px;
		width: 850px;
	}

	.img {
		width: 850px;
	}
</style>
